<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>动效组建</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [121.547119, 28.585165, 1000],
        lookAt: [121.547119, 28.585165, 0], 
        cameraScrollSpeed: 5,
        minZoom: 1,
        maxZoom: 18,
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        fogColor: '#66CCFF', //雾的颜色
        fogStartAngle: 40, //雾开始的角度
        // background: "Sky",
        isUseMapCarpet: true, //是否开启地图的地毯底图，避免地图拖动的时候没来得及加载的瓦片一片空白
        baseLayer: [
            {
                // url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                urlDecimal: true,
                tileType: 'image',
                isSelect: true, //是否可以被选中
            },
            // {
            //     url: 'http://localhost:9000/examples/resources/ShpCLipper/{z}/{y}/{x}.shp',
            //     urlDecimal: true,
            //     tileType: 'shape',
            //     isSelect: true, //是否可以被选中
            // }
        ]
    });

    window.app.on('Click', function (e) {
        console.log(e);
    });
    
    RippleWall();
    CrossBeam();
    RippleCylinder();
    CircleScan();
    ShieldElectricRipple();
    BlinkingRing();
    LoopCircle();
    PanScan();
    RadarScan();    

    function RippleWall() {
        let RippleWall = new GE.RippleWall({
            positions: [[121.545119, 28.585165], [121.546119, 28.586165]],
            color: '#ff0000',
            speed: 1000,
            height: 80,
            altitude: 1
        });
        app.add(RippleWall);
    }

    function CrossBeam() {
        let CrossBeam = new GE.CrossBeam({
            center: [121.547119, 28.586165, 10],
            width: 100,
            height: 300,
            color: '#ff0000',
            speed: 3000
        });
        app.add(CrossBeam);
    }

    function RippleCylinder() {
        let RippleCylinder = new GE.RippleCylinder({
            center: [121.548119, 28.586165, 10],
            radius: 50,
            height: 100,
            color: '#ff00ff',
            speed: 3000
        });
        app.add(RippleCylinder);
    }  

    function CircleScan() {
        let CircleScan = new GE.CircleScan({
            center: [121.546119, 28.585165, 10],
            radius: 50,
            color: '#ff00ff',
            speed: 1000
        });
        app.add(CircleScan);
    }

    function ShieldElectricRipple() {
        let ShieldElectricRipple = new GE.ShieldElectricRipple({
            center: [121.547119, 28.585165, 50],
            color: '#ff0000',
            speed: 4000,
            width: 100,
            height: 100
        });
        app.add(ShieldElectricRipple);
    }

    function BlinkingRing() {
        let BlinkingRing = new GE.BlinkingRing({
            center: [121.548119, 28.585165, 10],
            radius: 50,
            innerRadius: 25,
            color: '#ff00ff',
            speed: 1000
        });
        app.add(BlinkingRing);
    }

    function LoopCircle() {
        let LoopCircle = new GE.LoopCircle({
            center: [121.546119, 28.584165, 10],
            radius: 50,
            color: '#ff00ff',
            speed: 3000
        });
        app.add(LoopCircle);
    }

    function PanScan() {
        let PanScan = new GE.PanScan({
            center: [121.547119, 28.584165, 10],
            radius: 50,
            angle: 60,
            color: '#ff00ff',
            speed: 3000
        });
        app.add(PanScan);
    }

    function RadarScan() {
        let RadarScan = new GE.RadarScan({
            center: [121.548119, 28.584165, 10],
            radius: 50,
            color: '#ff00ff',
            speed: 3000
        });
        app.add(RadarScan);
    }

</script>

</html>